<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#body{
			text-align: center;
		}
		#div1{
			width: 600px;
			height: 600px;
			background-color: aqua;
			margin: 0 auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		#div2{
			width: 500px;
			height: 500px;
			background-color: darkorange;
			line-height: 250px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			
		}
		#div3{
			width: 400px;
			height: 400px;
			background-color: salmon;
			margin: 0 auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		#div4{
			width: 300px;
			height: 300px;
			background-color: magenta;
			margin: 0 auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
	<body>
		<div id="div1"><p></p>
			<div id="div2"><a href=""></a>
				<div id="div3"><b></b>
					<div id="div4"><a href=""></a>
						
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 4.制作4个嵌套DIV ，要求：
		//       1.每个父DIV尺寸必须大于子DIV
		//       2.实现每个DIV在父DIV正中间
		//       3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		//       4.通过最底层DIV，打印每层父DIV，如：
		// 	
		// 	2级父元素为（），2级父节点为（）
		var arr=new Array;
		var div4 = document.getElementById('div4');
		var div3 = document.getElementById('div3');
		var div2 = document.getElementById('div2');
		var div1 = document.getElementById('div1');
			console.log('1级父元素为(',div4.parentElement,')')
			console.log('1级父节点为(',div4.parentNode,')')
			
			console.log('2级父元素为(',div4.parentElement.parentElement,')')
			console.log('2级父节点为(',div4.parentNode.parentNode,')')
			
			console.log('3级父元素为(',div4.parentElement.parentElement.parentElement,')')
			console.log('3级父节点为(',div4.parentNode.parentNode.parentNode,')')
			
			console.log('4级父元素为(',div4.parentElement.parentElement.parentElement.parentElement,')')
			console.log('4级父节点为(',div4.parentNode.parentNode.parentNode.parentNode,')')
			
			console.log('5级父元素为(',div4.parentElement.parentElement.parentElement.parentElement.parentElement,')')
			console.log('5级父节点为(',div4.parentNode.parentNode.parentNode.parentNode.parentNode,')')
			
			console.log('6级父元素为(',div4.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement,')')
			console.log('6级父节点为(',div4.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode,')')
			
			console.log(div4.children)
			console.log(div3.children)
			console.log(div2.children)
			console.log(div1.children)
			
			console.log(div4.childNodes)
			console.log(div3.childNodes)
			console.log(div2.childNodes)
			console.log(div1.childNodes)
		// 	....
	</script>
</html>
